<template>
  <div>
    <!-- 新鲜好物 -->
    <HomePanel title="新鲜好物" sub-title="新鲜好物 品质靠谱" ref="target">
      <!-- 使用具名插槽,vue3.0只能使用v-slot -->
      <template v-slot:right><XtxMore /></template>
      <!-- vue里的动画 -->
      <Transition name="fade">
        <ul v-if="goods && goods.length" ref="pannel" class="goods-list">
          <li v-for="item in goods" :key="item.id">
            <RouterLink to="/">
              <img :src="item.picture" alt="" />
              <p class="name">{{ item.name }}</p>
              <p class="price">&yen;{{ item.price }}</p>
            </RouterLink>
          </li>
        </ul>
        <HomeSkeleton v-else />
      </Transition>
    </HomePanel>
  </div>
</template>

<script>
import HomeSkeleton from './home-skeleton'
import HomePanel from '../components/home-panel'
import { useLazyData } from '@/hooks'
import { findNew } from '@/api/home'
export default {
  name: 'HomeNew',
  components: {
    HomePanel,
    HomeSkeleton
  },
  // data () {
  //   return {
  //     goods: []
  //   }
  // },
  // async created () {
  //   const { result } = await findNew()
  //   this.goods = result
  // }
  setup () {
    // // 定义数据
    // // 商品数据
    // const goods = ref([])
    // // 面板容器,dom对象/组件实例 target是观察的目标容器
    // const target = ref(null)
    // // stop 是停止观察是否进入或移出可视区域的行为
    // const { stop } = useIntersectionObserver(
    //   // target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
    //   target,
    //   // isIntersecting 是否进入可视区域，true是进入 false是移出
    //   // observerElement 被观察的dom
    //   ([{ isIntersecting }], observerElement) => {
    //     if (isIntersecting) {
    //       // 在此处可根据isIntersecting来判断，然后做业务
    //       stop()
    //       // console.log(isIntersecting ? 'new进入可视区域' : 'new离开可视区域')
    //       // 进入可视区域,加载数据即可
    //       findNew().then(data => {
    //         goods.value = data.result
    //       })
    //     }
    //   }
    // )
    const { target, result } = useLazyData(findNew)
    // 返回数据
    return { goods: result, target }
  }
}
</script>

<style lang="less" scoped>
.goods-list {
  display: flex;
  justify-content: space-between;
  height: 406px;
  li {
    width: 306px;
    height: 406px;
    background: #f0f9f4;
    .hoverShadow();
    img {
      width: 306px;
      height: 306px;
    }
    p {
      font-size: 22px;
      padding-top: 12px;
      text-align: center;
    }
    .price {
      color: @priceColor;
    }
  }
}
</style>
